import { Outlet, Link, useLoaderData } from "react-router-dom";
import { ContactType } from "../Contact/type";

export default function Root() {
	const { contacts } = useLoaderData() as { contacts: ContactType[] };

	return (
		<>
			<div id="sidebar">
				<h1>React Router 控制</h1>
				<div>
					<form
						id="search-form"
						role="search"
					>
						<input
							id="q"
							aria-label="Search contacts"
							placeholder="搜索"
							type="search"
							name="q"
						/>
						<div
							id="search-spinner"
							aria-hidden
							hidden={true}
						/>
						<div
							className="sr-only"
							aria-live="polite"
						></div>
					</form>
					<form method="post">
						<button type="submit">New</button>
					</form>
				</div>
				<nav>
					{contacts.length ? (
						<ul>
							{contacts.map((contact) => (
								<li key={contact.id}>
									<Link to={`contacts/${contact.id}`}>
										{contact.first || contact.last ? (
											<>
												{contact.first} {contact.last}
											</>
										) : (
											<i>No Name</i>
										)}{" "}
										{contact.favorite && <span>★</span>}
									</Link>
								</li>
							))}
						</ul>
					) : (
						<p>
							<i>No contacts</i>
						</p>
					)}
				</nav>
			</div>
			<div id="detail">
				<Outlet />
			</div>
		</>
	);
}
